<script setup lang="ts">
import {ref} from 'vue'
import type {FormInstance, UploadProps} from 'element-plus'
import {ElMessage} from 'element-plus'
import noFooter from "@/components/noFooter-card.vue";
import {Plus} from '@element-plus/icons-vue'

const formRef = ref<FormInstance>()
// 表单数据
const form = ref({
  input1: '',
  select1: '',
  inputNumber1: null,
  uploader1: [],
  desc: ''
})
// 表单校验规则
const rules = ref({})
// 商品分类选项
const select1Options = ref([
  {
    label: '火锅底料',
    value: '1',
  },
  {
    label: '火锅配料',
    value: '2',
  }])

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const imageUrl = ref('')

//上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

//提交表单
const onSubmit = () => {
  console.log('submit!')
}
//图片上传限制
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<template>
  <div class="good-add">
    <noFooter>
      <template #title>
        <h2>商品添加</h2>
      </template>
      <template #content>
        <el-form v-model="form" :rules="rules" ref="formRef" label-position="right" label-width="70px">
          <el-form-item prop="input1" label="商品名称" style="width: 380px">
            <el-input v-model="form.input1" placeholder="商品名称">
            </el-input>
          </el-form-item>
          <el-form-item prop="select1" label="商品分类" style="width:215px">
            <el-select v-model="form.select1" :clearable="true" placeholder="商品分类" :filterable="true">
              <el-option :label="option.label" :value="option.value" v-for="option in select1Options"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="inputNumber1" label="商品价格">
            <el-input-number v-model.number="form.inputNumber1" placeholder="商品价格"></el-input-number>
          </el-form-item>
          <el-form-item prop="uploader1" label="商品图片">
            <el-upload
                class="avatar-uploader"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品描述" style="width:380px">
            <el-input v-model="form.desc" type="textarea"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="large">添加商品</el-button>
          </el-form-item>
        </el-form>
      </template>
    </noFooter>
  </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>